<template>
  <navbar title="帮助文档" :isBack="true"></navbar>
  <view class="content flex-direction-column" :style="{ minHeight: tools.clientTopHight() }">
    <view class="header">
      <image class="img" src="/pagesA/static/image/15.png"></image>
      <view class="user flex-direction-column">
        <text>Hi~ {{ JSON.parse(user.$state.userInfo).nick_name }}</text>
        <text>请选用需要的服务，我们将持续为您服务</text>
      </view>
    </view>
    <view class="nav" v-if="tabs">
      <view class="content">
        <u-tabs
          active-color="#5062A7"
          bar-width="68"
          v-model="current"
          :height="90"
          :list="tabs"
          :is-scroll="false"
          :bar-style="barStyle"
          inactive-color="#666666"
        ></u-tabs>
      </view>
    </view>
    <loading v-if="!tabs"></loading>
    <picture
      v-if="!tabs[current].child.length"
      title="暂无文档"
      bg="#fff"
      imgPath="/static/image/18.png"
      imgHeight="200rpx"
      imgWidth="360rpx"
      :height="tools.clientTopHight(170)"
    ></picture>
    <helpList v-else :list="tabs[current].child"></helpList>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getHelp } from '@/service/api/index'
import helpList from '@/common/list/help.vue'
import userPinia from '@/store/user'
import tools from '@/utils/tools'
const user = userPinia()

const barStyle = {
  background: 'linear-gradient(270deg, #5062A7 0%, #DBE2FF 100%)'
}

let current = ref(0)
let tabs = ref(null)

// 文档列表
const getHelpApi = async () => {
  const { msg } = await getHelp()
  tabs.value = msg
}

onLoad(() => {
  getHelpApi()
})
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 220rpx;
  position: relative;
  .user {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    align-items: center;
    justify-content: center;
    text {
      width: 564rpx;
      color: #ffffff;
      &:nth-child(1) {
        height: 40rpx;
        font-size: 32rpx;
        line-height: 40rpx;
      }
      &:nth-child(2) {
        height: 40rpx;
        font-size: 24rpx;
        margin-top: 20rpx;
        line-height: 40rpx;
      }
    }
  }
}
.nav {
  height: 100rpx;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
}
.content {
  // margin: 0 350rpx 0 0rpx;
}
</style>
